import { Navigate,useRoutes } from 'react-router-dom'
import Login from '../pages/Login'
import Main from '../pages/Main'
import NotFound from '../components/404'
import Home from '../pages/Main/Home'
import About from '../pages/Main/About'
import List from '../components/List'



const routes = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/main",
    element: <Main />,
    children:[
      {
        path:"/main/home",
        element:<Home/>,
        children:[
          {
            path:"/main/home/music/:id",
            element:<List/>
          },
          {
            path:"/main/home/news/:id",
            element: <List/>
          },
        ]
      },
      {
        path:"/main/about",
        element:<About/>
      },
    ]
  },
  // 这个是路由导航
  {
    path: "/",
    element: <Navigate to="/login" />
  },
  {
    path: "*",
    element: <NotFound />
  },

]

export default routes;

// 这样的写法，认为定义了GetRoutes组件，这个组件就是根据路由表生成的，路由配置结构
export const GetRoutes =()=>{
  // 在组件中的外层可以使用hook
  return useRoutes(routes)
}

// 自定义hooks
export const useMyRoutes = () =>{
  //在自定义hooks中是可以使用hook
  return useRoutes(routes)
}